<script lang="ts" setup>
import Logo from '@/layouts/components/Logo.vue'
import Breadcrumb from '@/layouts/components/Breadcrumb.vue'
</script>

<template>
    <div class="w-full h-full bg-white py-3 flex items-center justify-between">
      <div class="flex items-center justify-between gap-4">
        <Logo />
        <!-- 面包屑导航 -->
        <Breadcrumb />
      </div>
      <div class="flex items-center space-x-4">
        <el-dropdown>
          <div class="flex items-center cursor-pointer">
            <img
              src="https://picsum.photos/id/64/200/200"
              alt="用户头像"
              class="w-8 h-8 rounded-full object-cover"
            />
            <span class="ml-2 hidden sm:inline-block">管理员</span>
            <el-icon class="ml-1">
              <CaretBottom />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon size="20px">
                  <svg-icon name="mine" />
                </el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon size="20px">
                  <svg-icon name="update-password" />
                </el-icon>
                修改密码
              </el-dropdown-item>
              <el-dropdown-item divided>
                <el-icon size="20px">
                  <svg-icon name="logout" />
                </el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
</template>

<style scoped>
/* 顶部导航栏样式 */
</style>
